<template>
  <div class="Resourcce">
    <div class="mainBox">
      <div class="leftcontent">
        <div class="search_box">
          <el-date-picker
            @change="changeOne"
            v-model="week"
            type="week"
            placeholder="选择周"
            format="YYYY第ww周"
          >
          </el-date-picker>
        </div>
        <div class="percentage">
          <div class="Success_rate" style="background: rgba(39, 215, 176, 0.1)">
            <!-- <p class="wz">
              {{
                CmbizCount?.changeSuccessRate
                  ? ChangeDecimalToPercentage(CmbizCount.changeSuccessRate)
                  : ''
              }}
            </p>
            <p>变更成功率</p> -->

            <span class="title_tip" style="color: #27d7b0">变更成功率</span>
            <span class="Num" style="color: #27d7b0">{{
              CmbizCount?.changeSuccessRate ?? '0'
            }}</span>
          </div>
          <div class="Emergency_change" style="background: rgba(252, 111, 94, 0.1)">
            <span class="title_tip" style="color: #fc6f5e">紧急变更占比</span>
            <span class="Num" style="color: #fc6f5e">
              {{ CmbizCount?.emergencyCompleteRate ?? '0' }}
            </span>
          </div>
        </div>
        <div id="mycharts"></div>
      </div>
      <div class="rightcontent">
        <p class="current_time">当前时间统计</p>
        <div class="typeCount">
          <div class="situation" style="background: rgba(252, 111, 94, 0.1)">
            <span class="typeNum" style="color: #fc6f5e">
              {{ CmbizCount?.abnormalReportingCount + CmbizCount?.flowExceptionCount }}</span
            >
            <!-- //填报超时+流程异常 -->
            <span class="type" style="color: #fc6f5e">当前异常</span>
          </div>
          <div
            class="situation"
            style="background: rgba(255, 187, 55, 0.1); cursor: pointer"
            @click="goresources('6')"
          >
            <span class="typeNum" style="color: #ffbb37">{{
              CmbizCount?.flowExceptionCount ?? '0'
            }}</span>
            <span class="type" style="color: #ffbb37">审批超时</span>
          </div>
          <div
            class="situation"
            style="background: rgba(170, 95, 255, 0.1); cursor: pointer"
            @click="goresources('10')"
          >
            <span class="typeNum" style="color: #aa5fff">{{
              CmbizCount?.emergencyChangeCount ?? '0'
            }}</span>
            <span class="type" style="color: #aa5fff">紧急变更</span>
          </div>
          <div
            class="situation"
            style="background: rgba(137, 201, 151, 0.1); cursor: pointer"
            @click="goresources('11')"
          >
            <span class="typeNum" style="color: #89c997">{{
              CmbizCount?.nonEmergencyChangeCount ?? '0'
            }}</span>
            <span class="type" style="color: #89c997">非紧急变更</span>
          </div>
          <div
            class="situation"
            style="background: rgba(70, 84, 93, 0.1); cursor: pointer"
            @click="goresources('7')"
          >
            <span class="typeNum" style="color: #46545d">{{
              CmbizCount?.toBeExecutedCount ?? '0'
            }}</span>
            <span class="type" style="color: #46545d">待执行</span>
          </div>
          <div
            class="situation"
            style="background: rgba(0, 122, 245, 0.1); cursor: pointer"
            @click="goresources('8')"
          >
            <span class="typeNum" style="color: #007af5">{{
              CmbizCount?.inExecutionCount ?? '0'
            }}</span>
            <span class="type" style="color: #007af5">执行中</span>
          </div>
          <div
            class="situation"
            style="background: rgba(193, 118, 61, 0.1); cursor: pointer"
            @click="goresources('9')"
          >
            <span class="typeNum" style="color: #c1763d">{{
              CmbizCount?.timeoutNotExecutedCount ?? '0'
            }}</span>
            <span class="type" style="color: #c1763d">超时未执行</span>
          </div>
          <div
            class="situation"
            style="background: rgba(168, 66, 0, 0.1); cursor: pointer"
            @click="goresources('5')"
          >
            <span class="typeNum" style="color: #a84200">{{
              CmbizCount?.abnormalReportingCount ?? '0'
            }}</span>
            <span class="type" style="color: #a84200">结果填报超时</span>
          </div>

          <!-- <div class="situation" style="background: rgba(252, 111, 94, 0.1)">
            <span class="typeNum" style="color: #fc6f5e">
              {{ CmbizCount?.unPlanedNotSubmitCount }}</span
            >
            <span class="type" style="color: #fc6f5e">非计划未提交</span>
          </div>
          <div
            class="situation"
            style="background: rgba(170, 95, 255, 0.1); cursor: pointer"
            @click="goresources('13')"
          >
            <span class="typeNum" style="color: #aa5fff">{{
              CmbizCount?.unPlanedNotClosedT2Count ?? '0'
            }}</span>
            <span class="type" style="color: #aa5fff">T-2非计划未关闭</span>
          </div>
          <div
            class="situation"
            style="background: rgba(137, 201, 151, 0.1); cursor: pointer"
            @click="goresources('14')"
          >
            <span class="typeNum" style="color: #89c997">{{
              CmbizCount?.unPlanedNotClosedT3Count ?? '0'
            }}</span>
            <span class="type" style="color: #89c997">大于T-2非计划未关闭</span>
          </div> -->
          <!-- <div
            class="situation_yj"
            style="background: rgba(167, 49, 178, 0.1); cursor: pointer"
            @click="goresources('5')"
          >
            <span class="typeNum" style="color: #a731b2">{{
              CmbizCount?.yingJiChangeCount ?? '0'
            }}</span>
            <span class="type" style="color: #a731b2">应急变更</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { watch, ref, onMounted, getCurrentInstance } from 'vue'; // reactive,
  import { useRouter } from 'vue-router';
  import { useStore } from 'vuex';
  import moment from 'moment';
  import { getCmbizCount } from '@/http/api/resources';
  import { ElMessage } from 'element-plus';
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const router = useRouter();
  const store = useStore();
  const CmbizCount = ref();
  const yctime = ref('');
  const startTime = ref('');
  const endTime = ref('');
  const startTimeStamp = ref('');
  const endTimeStamp = ref('');
  const week = ref('');
  // const emergencyCompleteRate = ref(false);
  // const changeSuccessRate = ref(false);
  const { proxy } = getCurrentInstance() as any;
  const myChart = ref<HTMLElement>();
  onMounted(() => {
    getCurrWeekDays();
    getCmbiz(startTime.value, endTime.value);
    barBox1();
  });
  const getCmbiz = (startTime: string, endTime: striing) => {
    getCmbizCount({
      startTime: startTime,
      endTime: endTime
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      CmbizCount.value = res.data.data;
      yctime.value = CmbizCount.value.abnormalReportingCount + CmbizCount.value.flowExceptionCount;
      barBox1();
    });
  };
  const getCurrWeekDays = () => {
    let date = [];
    let weekOfday = parseInt(moment().format('d')); // 计算今天是这周第几天 周日为一周中的第一天
    let start = moment().subtract(weekOfday, 'days').format('YYYYMMDD'); // 周一日期
    let end = moment()
      .add(7 - weekOfday - 1, 'days')
      .format('YYYYMMDD'); // 周日日期
    date.push(start);
    date.push(end);

    startTime.value = start;
    endTime.value = end;
    return date;
  };
  const changeOne = (val) => {
    let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
    // startTimeStamp.value = Timetransform(timeStamp - 24 * 60 * 60 * 1000); //开始时间
    startTimeStamp.value = Timetransform(timeStamp); //开始时间
    // endTimeStamp.value = Timetransform(timeStamp + 24 * 60 * 60 * 1000 * 5); //结束时间
    endTimeStamp.value = Timetransform(timeStamp + 24 * 60 * 60 * 1000 * 6); //结束时间
    endTime.value = endTimeStamp.value;
    startTime.value = startTimeStamp.value;
    getCmbiz(startTime.value, endTime.value);
  };
  const Timetransform = (unixtimest: Number) => {
    let unixtimestamp = new Date(unixtimest);
    let year = 1900 + unixtimestamp.getYear();
    let month = '0' + (unixtimestamp.getMonth() + 1);
    let date = '0' + unixtimestamp.getDate();
    // let hour = "0" + unixtimestamp.getHours();
    // let minute = "0" + unixtimestamp.getMinutes();
    // let second = "0" + unixtimestamp.getSeconds();
    return (
      year +
      month.substring(month.length - 2, month.length) +
      date.substring(date.length - 2, date.length)
    );
  };
  const barBox1 = () => {
    if (myChart.value != null && myChart.value != '' && myChart.value != undefined) {
      myChart.value.dispose();
    }
    myChart.value = proxy.$ECharts.init(document.getElementById('mycharts'));
    let option;
    // let { changeExceptionCount, successCount, toBeImplementedCount, underApprovaCount } =
    // CmbizCount;
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '5',
        bottom: '0',
        left: '80'
      },
      xAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'category',
        triggerEvent: true,
        axisTick: {
          show: false
        },
        data: [
          {
            // value: "流程异常",
            value: '变更失败',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            // value: "填报超时",、
            value: '变更成功',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            // value: "变更异常",
            value: '已完成变更',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            // value: "变更成功",
            value: '待填报',
           // value: '待关闭',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            // value: "待实施",
            value: '审批中',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          },
          {
            // value: "审批中",
            value: '计划中变更',
            //value: '未完成变更',
            textStyle: {
              color: '#46545D',
              fontSize: 14
            }
          }
        ],
        axisLine: {
          show: false
        }
      },
      series: [
        {
          type: 'bar',
          barWidth: '10',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
            borderRadius: 5
          },
          label: {
            show: true,
            position: 'right',
            color: '#46545D',
            fontSize: 14
          },
          itemStyle: {
            borderRadius: 5
          },

          data: [
            {
              value: CmbizCount?.value?.changeExceptionCount
                ? CmbizCount?.value?.changeExceptionCount
                : '0', // 变更失败
              //value: '100',
              itemStyle: {
                color: '#ffaa5e'
              },
              backgroundStyle: {
                color: 'rgba(255, 187, 55, 0.1)'
              }
            },
            {
              // value: this.Filling ? this.Filling : "0", // 填报异常
              value: CmbizCount?.value?.successCount ? CmbizCount?.value?.successCount : '0', // 变更成功
              //value: '100',
              itemStyle: {
                color: '#AA5FFF'
              }
            },

            {
              value:
                CmbizCount?.value?.successCount + CmbizCount?.value?.changeExceptionCount
                  ? CmbizCount?.value?.successCount + CmbizCount?.value?.changeExceptionCount
                  : '0', // 已完成变更
              // value: '10',
              itemStyle: {
                color: '#27D7B0'
              }
            },
            // {
            //     value: this.changeSuccess
            //         ? this.changeSuccess
            //         : "0", // 变更成功
            //     // value: "40",
            //     itemStyle: {
            //         color: "#007AF5",
            //     },
            // },
            {
              value: CmbizCount?.value?.toBeImplementedCount
                ? CmbizCount?.value?.toBeImplementedCount
                : '0', // 待实施
              // value: '60',
              itemStyle: {
                color: '#FC6F5E'
              }
            },
            {
              value: CmbizCount?.value?.underApprovaCount
                ? CmbizCount?.value?.underApprovaCount
                : '0', // 审批中
              //value: '80',
              itemStyle: {
                color: '#FFBB37'
              }
            },
            // {
            //   value:
            //     CmbizCount?.value?.toBeImplementedCount + CmbizCount?.value?.underApprovaCount
            //       ? CmbizCount?.value?.toBeImplementedCount + CmbizCount?.value?.underApprovaCount
            //       : '0', // 计划中变更
            //   // value: '80',
            //   itemStyle: {
            //     color: '#FFBB37'
            //   }
            // }
             {
              value:
                CmbizCount?.value?.toBeImplementedCount + CmbizCount?.value?.underApprovaCount
                  ? CmbizCount?.value?.toBeImplementedCount + CmbizCount?.value?.underApprovaCount
                  : '0', // 未完成变更
              // value: '80',
              itemStyle: {
                color: '#FFBB37'
              }
            }
          ]
        }
      ]
    };

    option && myChart.value.setOption(option);
    myChart.value.getZr().on('click', (params) => {
      const pointInPixel = [params.offsetX, params.offsetY];
      if (myChart.value.containPixel('grid', pointInPixel)) {
        let xIndex = myChart.value.convertFromPixel({ seriesIndex: 0 }, [
          params.offsetX,
          params.offsetY
        ])[1];
        if (xIndex == '5') {
          // this.$router.push({
          //     name: "resources",
          //     params: {
          //         type: "1",
          //         startTime: this.startTime,
          //         endTime: this.endTime,
          //     },
          // });
        } else if (xIndex == '4') {
          store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
          router.push({
            name: 'resources',
            params: {
              type: '1',
              startTime: startTime.value,
              endTime: endTime.value
            }
          });
        } else if (xIndex == '3') {
          store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
          router.push({
            name: 'resources',
            params: {
              type: '2',
              startTime: startTime.value,
              endTime: endTime.value
            }
          });
        } else if (xIndex == '2') {
          // $router.push({
          //     name: "resources",
          //     params: {
          //         type: "4",
          //         startTime: startTime,
          //         endTime: endTime,
          //     },
          // });
        } else if (xIndex == '1') {
          store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
          router.push({
            name: 'resources',
            params: {
              type: '3',
              startTime: startTime.value,
              endTime: endTime.value
            }
          });
        } else if (xIndex == '0') {
          store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
          router.push({
            name: 'resources',
            params: {
              type: '4',
              startTime: startTime.value,
              endTime: endTime.value
            }
          });
        }
      }
    });
  };
  const goresources = (data: striing) => {
    store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
    router.push({
      name: 'resources',
      params: {
        type: data,
        startTime: startTime.value,
        endTime: endTime.value
      }
    });
  };
  watch(
    () => props.changeTime,
    () => {
      getCurrWeekDays();
      getCmbiz(startTime.value, endTime.value);
    }
  );
</script>

<style scoped lang="less">
.Resourcce{
  width: 100%;
  height: 100%;
}
  .mainBox {
    //  width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .leftcontent {
      width: 60%;
      .search_box {
        width: 100%;
        height: 37px;
        line-height: 37px;
        font-size: 16px;
        color: #fff;
        display: flex;
        margin-bottom: 5px;
        box-sizing: border-box;
        :deep(.el-date-editor) {
          width: 100%;
          :deep(.el-input__wrapper) {
            width: 100%;
            // margin: auto 0;
          }
        }
      }
      .percentage {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .Success_rate,
        .Emergency_change {
          width: 49.5%;
          // height: 100%;
          box-sizing: border-box;
          padding: 10px 8px;
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          .title_tip {
            font-weight: 400;
          }
          .Num {
            font-weight: bold;
          }
        }
      }
      #mycharts {
        width: 100%;
        height: calc(100% - 77px);
      }
    }
    .rightcontent {
      width: 38%;

      .current_time {
        margin: 0;
        padding: 0;
        line-height: 37px;
        font-size: 16px;
        font-weight: bold;
        color: #46545d;
        margin-bottom: 5px;
        box-sizing: border-box;
      }
      .typeCount {
        height: calc(100% - 37px);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .situation {
          // height: 19%;
          height: 24%;
          width: 49%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .typeNum {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
          }
          .type {
            font-size: 12px;
            font-weight: 400;
          }
        }
        // .situation_yj {
        //   height: 19%;
        //   width: 100%;
        //   display: flex;
        //   flex-direction: column;
        //   justify-content: center;
        //   align-items: center;
        //   .typeNum {
        //     text-align: center;
        //     font-size: 18px;
        //     font-weight: 600;
        //   }
        //   .type {
        //     font-size: 12px;
        //     font-weight: 400;
        //   }
        // }
      }
    }
  }
</style>
